<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<ol class="breadcrumb">
	<li>员工管理</li>
	<li>员工信息管理</li>
</ol>
<div id="staff_toolbar">
	<div class="form-inline" role="form">
		<div class="form-group">
			<input name="search" class="form-control" type="text"
				placeholder="请输入员工号">
			<button id="btn_staff_search" type="button" class="btn btn-default">搜索</button>
		</div>
		<button id="btn_staff_add" type="button" class="btn btn-info">添加</button>
		<button id="btn_staff_remove" type="button" class="btn btn-danger">删除</button>
		<button id="btn_staff_alter" type="button" class="btn btn-warning">修改</button>
	</div>
</div>
<div class="modal fade" id="staffEditModal" tabindex="-1" role="dialog"
	aria-labelledby="staffEditModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="staffEditModal">编辑</h4>
			</div>
			<div class="modal-body">
				<form>
					<input type="hidden" name="staffId" data-bind-key="id">
					<div class="form-group">
						<label for="staff_name" class="control-label">员工姓名:(必填)</label> <input
							type="text" class="form-control" id="staff_name" name="staffName"
							data-type="must" data-bind-key="name">
					</div>
					<div class="form-group">
						<label for="staff_num" class="control-label">员工编号:(必填)</label> <input
							type="text" class="form-control" id="staff_num" name="staffNum"
							data-type="must" data-bind-key="num">
					</div>
					<div class="form-group">
						<label for="staff_phone" class="control-label">员工手机:(必填)</label> <input
							type="text" class="form-control" id="staff_phone"
							name="staffPhone" data-type="must" data-bind-key="phone">
					</div>
					<div class="form-group">
						<label for="staff_v_phone" class="control-label">员工虚拟号:(必填)</label>
						<input type="text" class="form-control" id="staff_v_phone"
							name="staffVPhone" data-type="must" data-bind-key="vPhone">
					</div>
					<div class="form-group">
						<label for="staff_remarks" class="control-label">备注:</label>
						<textarea class="form-control" id="staff_remarks"
							name="staffRemarks" data-bind-key="remarks"></textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary"
					id="btn_staff_edit_save">保存</button>
			</div>
		</div>
	</div>
</div>
<table id="staff_table" style="margin-top: 10px"></table>
<script>
	//http://bootstrap-table.wenzhixin.net.cn/documentation/
	var staff_table_page_num = 0;
	var limit = 10;
	$('#staff_table').bootstrapTable({
		columns : [ {
			field : 'row_num',
			title : "选择",
			checkbox : true,
			valign : "bottom"
		}, {
			title : '序号',
			formatter : function(value, row, index) {
				return (index + 1) + staff_table_page_num * limit;
			},
			align : "center",
			width : "30px"
		}, {
			field : 'name',
			title : '员工姓名',
			width : "150px"
		}, {
			field : "num",
			title : "员工工号",
			width : "150px"
		}, {
			field : "vPhone",
			title : "虚拟号",
			width : "150px"
		}, {
			field : 'remarks',
			title : '备注'
		} ],
		method : 'POST',
		url : "${ctx}/staff/list",
		contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
		responseHandler : function(res) {
			var data = {
				total : 0,
				rows : []
			};
			if (res.success) {
				data.total = res.data.totalElements;
				data.rows = res.data.content;
			}
			return data;
		},
		queryParams : function(params) {
			staff_table_page_num = params.offset / params.limit;
			return params;
		},
		height : 600,
		pageNumber : 1,
		pageSize : limit,
		pagination : true,
		sidePagination : "server",
		paginationFirstText : "首页",
		paginationPreText : "上一页",
		paginationNextText : "下一页",
		paginationLastText : "末页",
		toolbar : "#staff-toolbar",
		select : true,
		clickToSelect : true,
		onLoadError : function(status) {
			if (status == 200) {
				window.location.replace("${ctx}/login");
			}
		}
	});

	$("#btn_staff_add").click(function() {
		addModalOpen();
	});

	$("#btn_staff_remove").click(function() {
		var selections = $('#staff_table').bootstrapTable('getSelections');
		if (selections.length === 0) {
			bootstrapAlert("提醒", "请选择数据之后再执行删除操作", "确定");
		} else {
			bootstrapComfire("请问", "是否确定要删除所选则记录", "取消", "删除", function() {
				var ids = "";
				for (var i = 0; i < selections.length; i++) {
					ids = "," + selections[i].id;
				}
				if (ids.length > 0) {
					ids = ids.substr(1);
				}
				$.ajax({
					type : "POST",
					url : "${ctx}/staff/remove",
					data : {
						ids : ids
					},
					dataType : "json",
					success : function(data) {
						if (data.success) {
							staffEditModal.modal('hide');
							$('#staff_table').bootstrapTable('refresh');
							//blockUIGrowUIMsg(data.message, "success");
						} else {
							blockUIGrowUIMsg(data.message, "danger");
						}
					}
				});
			});
		}
	});

	$("#btn_staff_alter").click(function() {
		var selections = $('#staff_table').bootstrapTable('getSelections');
		if (selections.length === 0) {
			bootstrapAlert("提醒", "请选择数据之后再执行编辑操作", "确定");
		} else if (selections.length > 1) {
			bootstrapAlert("提醒", "执行编辑操作每次只能选定一条数据", "确定");
		} else {
			alterModalOpen();
			staffEditFormBind(selections[0]);
		}
	});

	var staffEditModal = $("#staffEditModal");

	function addModalOpen() {
		staffEditFormClean();
		$(".modal-title", staffEditModal).text("新建");
		staffEditModal.modal("show");
		var saveBtn = $("#btn_staff_edit_save", staffEditModal);
		saveBtn.unbind();
		saveBtn.click(function() {
			staffEditFormSave("add");
		})
	}

	function alterModalOpen() {
		$(".modal-title", staffEditModal).text("修改");
		staffEditModal.modal("show");
		var saveBtn = $("#btn_staff_edit_save", staffEditModal);
		saveBtn.unbind();
		saveBtn.click(function() {
			staffEditFormSave("alter");
		})
	}

	function staffEditFormSave(type) {
		var params = staffEditFormCheck(type);
		if (params.vaildSuccess) {
			$.ajax({
				type : "POST",
				url : "${ctx}/staff/save",
				data : params,
				dataType : "json",
				success : function(data) {
					if (data.success) {
						staffEditModal.modal('hide');
						$('#staff_table').bootstrapTable('refresh');
						//blockUIGrowUIMsg(data.message, "success");
					} else {
						blockUIGrowUIMsg(data.message, "danger");
					}
				}
			});
		} else {
			return;
		}

	}

	function staffEditFormClean() {
		var form = $("form", staffEditModal);
		var inputArr = $("input,textarea", form);
		for (var i = 0; i < inputArr.length; i++) {
			var self = $(inputArr[i]);
			self.val("");
		}
	}

	function staffEditFormBind(data) {
		var form = $("form", staffEditModal);
		var inputArr = $("input,textarea", form);
		for (var i = 0; i < inputArr.length; i++) {
			var self = $(inputArr[i]);
			var selfVal = self.val(data[self.data("bind-key")]);
		}
	}

	function staffEditFormCheck(type) {
		var vaildSuccess = true;
		var params = {
			actionType : type
		};
		var form = $("form", staffEditModal);
		var inputArr = $("input,textarea", form);
		for (var i = 0; i < inputArr.length; i++) {
			var self = $(inputArr[i]);
			var selfVal = self.val();
			self.parent().removeClass("has-error");
			if (self.data("type") == "must" && !selfVal) {
				self.parent().addClass("has-error");
				vaildSuccess = false;
				self.focus();
				break;
			} else {
				params[self.attr("name")] = selfVal;
			}
		}
		params["vaildSuccess"] = vaildSuccess;
		return params;
	}
</script>
